<template>
  <div>
    <el-dialog :title="option.title" :visible.sync="isShow" @close="closeUser" width="85%" @open="openCreate"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
        <div class="content">
          <el-card>
            <div class="mapMainBorder" :style="imageBox"></div>
            <div width="540px" height="200px" class="agentInfo">
              <el-form :model="detailInfo" ref="detailInfo" size="mini" label-position="left" label-width="130px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="坐席工号:" prop="AGENTID">
                      <span class="itemText">{{detailInfo.AGENTID}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="坐席姓名:" prop="AGENTNAME">
                      <span class="itemText">{{detailInfo.AGENTNAME}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="当前状态:" prop="STATUS">
                      <span class="itemText">{{format(detailInfo.STATUS)}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="开始时间:" prop="STASTARTTIME">
                      <span class="itemText">{{timeFormat(detailInfo.STASTARTTIME)}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="签入次数:" prop="logincount">
                      <span class="itemText">{{detailInfo.logincount}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="签入时长(秒):" prop="logindurn">
                      <span class="itemText">{{secondFormat(detailInfo.logindurn)}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="签出次数:" prop="logoutcount">
                      <span class="itemText">{{detailInfo.logoutcount}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="签出时长(秒):" prop="logoutdurn">
                      <span class="itemText">{{secondFormat(detailInfo.logoutdurn)}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="小休次数:" prop="breaktypecount">
                      <span class="itemText">{{detailInfo.breaktypecount}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="小休时长(秒):" prop="breaktypedurn">
                      <span class="itemText">{{secondFormat(detailInfo.breaktypedurn)}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="值机时长(秒):" prop="workdurn">
                      <span class="itemText">{{secondFormat(detailInfo.workdurn)}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="todayAgentStatus">
              <div class="todayAgentStatusText">今日情况</div>

              <el-form :model="todayAgentStatusInfo" ref="todayAgentStatusInfo" size="mini" label-position="left"
                label-width="130px">
                <el-tabs v-model="activeName" type="card">
                  <el-tab-pane v-for="(item, index) in detailInfo.MULMEDIATYPE" :label="nameFormat(item.MULMEDIA)"
                    :name="item.MULMEDIA" :key="index">
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <el-form-item label="当前类型状态:" prop="MULSTATUS">
                          <span class="itemText">{{format(item.MULSTATUS)}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="当前状态开始时间:" prop="MULSTASTARTTIME">
                          <span class="itemText">{{timeFormat(item.MULSTASTARTTIME)}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="转发次数:" prop="switchcount">
                          <span class="itemText">{{item.switchcount}}</span>
                        </el-form-item>
                      </el-col>   
                      <el-col :span="8">
                        <el-form-item label="通话时长(秒):" prop="establisheddurn">
                          <span class="itemText">{{secondFormat(item.establisheddurn)}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="通话次数:" prop="establishedcount">
                          <span class="itemText">{{item.establishedcount}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="呼入通话均长(秒):" prop="avestablisheddurn">
                          <span class="itemText">{{secondFormat(item.avestablisheddurn)}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="振铃时长(秒):" prop="ringingdurn">
                          <span class="itemText">{{secondFormat(item.ringingdurn)}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="振铃次数:" prop="ringingcount">
                          <span class="itemText">{{item.ringingcount}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="平均振铃时长(秒):" prop="avringingdurn">
                          <span class="itemText">{{secondFormat(item.avringingdurn)}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="整理时长(秒):" prop="aftercallworkdurn">
                          <span class="itemText">{{secondFormat(item.aftercallworkdurn)}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="示忙时长(秒):" prop="notreadydurn">
                          <span class="itemText">{{secondFormat(item.notreadydurn)}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="就绪时长(秒):" prop="readydurn">
                          <span class="itemText">{{secondFormat(item.readydurn)}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="整理次数:" prop="Aftercallworkcount">
                          <span class="itemText">{{item.Aftercallworkcount}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="示忙次数:" prop="notreadycount">
                          <span class="itemText">{{item.notreadycount}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="就绪次数:" prop="readycount">
                          <span class="itemText">{{item.readycount}}</span>
                        </el-form-item>
                      </el-col>
                      <!-- </el-row>
                    <el-row :gutter="20"> -->
                      <el-col :span="8">
                        <el-form-item label="匹配成功时长(秒):" prop="matcheddurn">
                          <span class="itemText">{{secondFormat(item.matcheddurn)}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="视频建立时长(秒):" prop="answerdurn">
                          <span class="itemText">{{secondFormat(item.answerdurn)}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="挂断次数:" prop="releasecount">
                          <span class="itemText">{{item.releasecount}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="匹配成功次数:" prop="matchedcount">
                          <span class="itemText">{{item.matchedcount}}</span>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item label="视频建立次数:" prop="answercount">
                          <span class="itemText">{{item.answercount}}</span>
                        </el-form-item>
                      </el-col>
                      
                      <el-col :span="8">
                        <el-form-item label="重新入队次数:" prop="backtoteamcount">
                          <span class="itemText">{{item.backtoteamcount}}</span>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                </el-tabs>
              </el-form>
            </div>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" type="primary" @click="addType">关闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import toolBox from "@/common/utils/toolBox";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import requestYg from "@/common/utils/requestYg";
  // import SeatStatus from "@/message/siteManagement/workplacemonitoring/querySeatStatus";
  export default {
    name: "",
    data() {
      return {
        mediaOption: [{
            value: 'video',
            label: '视频'
          },
          {
            value: 'voice',
            label: '电话'
          },
          {
            value: 'chat',
            label: '文字'
          },
        ],
        activeName: "video",
        loading: false,
        imageBox: {
          backgroundImage: "url(static/images/icons/icon/staff.png)",
          backgroundRepeat: "no-repeat",
          backgroundSize: "100%,100%",
          width: "120px",
          height: "150px"
        },
        // 对话框
        enum: {
          'login': '签入',
          'ready': '就绪',
          'matched': '已匹配',
          'ringing': '振铃',
          'answer': '接听（视频建立）状态',
          'established': '通话中状态',
          'release': '挂断',
          'aftercallwork': '话后小结（整理）',
          'notready': '示忙',
          'breaktype': '小休模式',
          'logout': '签出',
        },
        detailInfo: {},
        todayAgentStatusInfo: {},
        // -----------
        form: {
          AGENTID: "",
          AGENTNAME: "",
          YY_STATUS_CurrentAgentStatus: "",
          YY_CurrentAgentStatus_Time: "",
          loginIntime: "",
          EXTENSIONNO: "",
          avecalltimes: "",
          YY_TIME_CALLS_AVER: "",
          YY_TIME_AfterCallWork_AVER: "",
          YY_TIME_NotReady: "",
          YY_TIME_AgentReady: "",
          YY_TIME_AgentLogin: "",
          YY_NUM_NotReady: "",
          availability: ""
        }
      };
    },
    props: {
      //父元素传递的数据
      option: Object
    },
    components: {},
    computed: {
      isShow: {
        //创建用户弹窗是否显示
        get: function () {
          return this.option.isShow;
        },
        set: function (newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    created: function () {},
    watch: {},
    methods: {
      // 秒格式化
      secondFormat(value){
        return toolBox.formatSeconds(value)
      },
      nameFormat(value){
        let name = ''
        this.mediaOption.find((item)=>{
          if(item.value == value){
            name = item.label
          }
        })
        return name 
      },
      format(val) {
        //格式化表格
        return this.enum[val];
      },
      timeFormat(time) {
        if(time == '' || time == undefined){
          return ''
        }
        // return new Date(parseInt(time)).toLocaleString()
        return toolBox.timestampToTime(parseInt(time))
      },
      openCreate() {
        //打开弹窗事件
        this.detailInfo = this.option.currentRow;
        if(this.detailInfo.MULMEDIATYPE.length == 0){
          this.detailInfo.MULMEDIATYPE = [{
            MULMEDIA: 'video',
            MULSTATUS: '',
            MULSTASTARTTIME: '',
            avringingdurn: '',
            avestablisheddurn: '',
            readycount: '',
            readydurn:'',
            notreadycount:'',
            notreadydurn: '',
            Aftercallworkcount: '',
            aftercallworkdurn: '',
            matchedcount: '',
            matcheddurn: '',
            ringingcount: '',
            ringingdurn: '',
            answercount: '',
            answerdurn: '',
            establishedcount: '',
            establisheddurn: '',
            releasecount: '',
            backtoteamcount: '',
            switchcount: '',
          }]
        }
      },
      closeUser() {
        //关闭弹窗,清除表单数据，清除表单验证
        this.detailInfo = {};
        this.option.isShow = false;
      },
      addType() {
        //关闭弹窗事件，清除表单验证
        this.detailInfo = {};
        this.option.isShow = false;
      }

    }
  };

</script>
<style lang="scss" scoped>
  .content {
    display: flex;
    flex-direction: column;
  }

  .require {
    color: red;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
    font-size: 18px;
  }

  .role {
    width: 95%;
    border: 1px solid #eee;
    border-radius: 4px;
    height: 290px;

    .roleHeader {
      color: #606266;
      font-weight: 500;
      font-size: 14px;
      background: #f5f7fa;
      height: 42px;
      box-sizing: border-box;
      padding: 9px;
      overflow-y: auto;
    }
  }

  .el-card {
    overflow: inherit;
  }

  .mapMainBorder {
    // #e5e5e5;
    // border: 1px solid red;
    width: 60px;
    height: 80px;
    position: absolute;
  }

  .staffInfoText {
    border-bottom: 1px solid #e5e5e5;
    color: orange;
    height: 35px;
    line-height: 33px;
    text-align: center;
  }

  .agentInfo {
    margin-left: 150px;
    // border:1px solid black;
  }

  .itemText {
    color: #208cf0;
  }

  .todayAgentStatus {
    // border:1px solid black ;
    margin-top: 20px;
    width: 95%;
    // height: 200px;
  }

  .todayAgentStatusText {
    border-bottom: 1px solid #e5e5e5;
    color: orange;
    height: 35px;
    line-height: 33px;
    margin-bottom: 20px;
  }

</style>
